<template>
  <div class="continer">
    <section class="head-box">
      <section class="item-box">
        <itemBox :title="headData.title">
          <headNavtab :headData="headData.navData" :navIndex="navIndex" @navClick="navClick"></headNavtab>
          <basicsList :basicsData="headData.basicsData"></basicsList>
        </itemBox>
      </section>
      <section class="item-box">
        <itemBox :title="headData2.title">
          <tscc-bar-chart
            :chartData="tsccBarData"
            :requiredSettings="tsccBarRequiredSettings"
            :optionalSettings="tsccBarOptionalSettings"
            style="height:90%;margin-top:20px"
          ></tscc-bar-chart>
        </itemBox>
      </section>
      <section class="item-box">
        <itemBox :title="headData3.title">
          <chartBar :chartData="headData3" :id="headData2.id"></chartBar>
        </itemBox>
      </section>
    </section>
    <section class="content-box">
      <section class="item-box">
        <itemBox :title="tsccLiquOptionalSettings.title">
          <headNavtab :headData="headData.navData" :navIndex="navIndex1" @navClick="navClick"></headNavtab>
          <TsccLiquChart
            :chartData="tsccLiquData"
            :requiredSettings="tsccLiquRequiredSettings"
            :optionalSettings="tsccLiquOptionalSettings"
            style="height:80%"
          ></TsccLiquChart>
        </itemBox>
      </section>
      <section class="item-box">
        <itemBox :title="headData5.title">
          <tscc-bar-chart
            :chartData="tsccBarSData"
            :requiredSettings="tsccBarSRequiredSettings"
            :optionalSettings="tsccBarSOptionalSettings"
            style="height:90%;margin-top:20px"
          ></tscc-bar-chart>
          <!-- <barYs :chartData="headData5"></barYs> -->
        </itemBox>
      </section>
      <section class="item-box">
        <itemBox :title="tsccPieOptionalSettings.title">
          <!-- <pieChart :chartData="headData6" :id="headData6.id"></pieChart> -->
          <TsccPieChart
            :chartData="tsccPieData"
            :requiredSettings="tsccPieRequiredSettings"
            :optionalSettings="tsccPieOptionalSettings"
          />
        </itemBox>
      </section>
      <section class="item-box">
        <itemBox :title="headData7.title">
          <TsccBarLineChart
            :chartData="tsccBarLineData"
            :requiredSettings="tsccBarLineRequiredSettings"
            :optionalSettings="tsccBarLineOptionalSettings"
            style="height:90%;margin-top:20px"
          ></TsccBarLineChart>
          <!-- <barLineChart :chartData="headData7" :id="headData7.id" style="height:75%"></barLineChart> -->
        </itemBox>
      </section>
    </section>
    <section class="content-box">
      <section class="item-box">
        <itemBox :title="headData8.title">
          <basicLine :chartData="headData8"></basicLine>
        </itemBox>
      </section>
      <section class="item-box">
        <itemBox :title="tsccDoughnutOptionalSettings.title">
          <!-- <pieChart :chartData="headData9"></pieChart> -->
          <TsccPieChart
            :chartData="tsccDoughnutData"
            :requiredSettings="tsccDoughnutRequiredSettings"
            :optionalSettings="tsccDoughnutOptionalSettings"
          />
        </itemBox>
      </section>
      <section class="item-box">
        <itemBox :title="tsccGaugeOptionalSettings.title">
          <!-- <basicGauge :chartData="headData10"></basicGauge> -->
          <TsccGaugeChart
            :chartData="tsccGaugeData"
            :requiredSettings="tsccGaugeRequiredSettings"
            :optionalSettings="tsccGaugeOptionalSettings"
          />
        </itemBox>
      </section>
      <section class="item-box">
        <itemBox :title="headData11.title">
          <basicRadar :chartData="headData11" style="height:100%;margin-top:20px"></basicRadar>
        </itemBox>
      </section>
      <section class="item-box">
        <itemBox :title="tsccLineOptionalSettings.title">
          <TsccLineChart
            :chartData="tsccLineData"
            :requiredSettings="tsccLineRequiredSettings"
            :optionalSettings="tsccLineOptionalSettings"
            style="height:100%;margin-top:20px"
          ></TsccLineChart>
        </itemBox>
      </section>
    </section>
  </div>
</template>
<script>
import itemBox from "@/components/itemBox";
import headNavtab from "@/components/headNavtab";
import chartBar from "@/components/charts/HorizontalBar";
import pieChart from "@/components/charts/PieChart";
import TsccLiquChart from "@/components/charts/TsccLiquChart";
import barYs from "@/components/charts/BarYs";
import TsccBarLineChart from "@/components/charts/TsccBarLineChart";
import basicsList from "@/components/BasicsList";
import tableBox from "@/components/tableBox";
import basicBar from "@/components/charts/Basic-bar";
import basicLine from "@/components/charts/Basic-line";
import basicGauge from "@/components/charts/Basic-gauge";
import basicRadar from "@/components/charts/Basic-radar";
import TsccBarChart from "@/components/charts/TsccBarChart";
import TsccLineChart from "@/components/charts/TsccLineChart";
import TsccPieChart from "@/components/charts/TsccPieChart";
import TsccGaugeChart from "@/components/charts/TsccGaugeChart";
export default {
  data() {
    return {
      navIndex: 0,
      navIndex1: 0,
      navIndex2: 0,
      headData: {
        title: "基础tabnav",
        navData: [
          { id: 1, name: "总热源" },
          { id: 2, name: "总热源" },
          { id: 3, name: "总热源" },
          { id: 4, name: "总热源" }
        ],
        basicsData: [
          { id: 1, name: "瞬时热指标", value: "95665 W/m3" },
          { id: 1, name: "瞬时热指标", value: "95665 W/m3" },
          { id: 1, name: "瞬时热指标", value: "95665 W/m3" },
          { id: 1, name: "瞬时热指标", value: "95665 W/m3" },
          { id: 1, name: "瞬时热指标", value: "95665 W/m3" },
          { id: 1, name: "瞬时热指标", value: "95665 W/m3" }
        ]
      },
      headData3: {
        title: "chartBar 横向柱状图",
        option: {
          color: ["#E24C2F", "#F5D212", "#156ADE"],
          title: ""
        },
        yaxisData: ["总厂", "分厂", "热电"],
        data: [
          [200, 170, 240, 244, 200, 220, 210],
          [320, 302, 341, 374, 390, 450, 420],
          [-120, -132, -101, -134, -190, -230, -210]
        ],
        name: ["利润", "收入", "支出"]
      },
      headData2: {
        title: "基础的柱状图",
        data: [120, 200, 150, 80, 70, 110, 130],
        xAxisData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        option: {
          text: "基础的柱状图",
          xAxisLineColor: "#0c3b71",
          xAxisLabelColor: "rgb(170,170,170)",
          graphicColor: ["#00feff", "#027eff", "#0286ff"],
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          }
        }
      },
      tsccLiquData: [0.5],
      tsccLiquRequiredSettings: {
        count: 3
      },
      tsccLiquOptionalSettings: {
        title: "水波图"
      },
      headData5: {
        title: "双Y轴+markLine的柱状图",
        option: {
          color: ["#3E1CDC", "#097CEB", "#21C76E"]
        },
        xAxisData: ["1月", "2月", "3月", "4月", "5月", "6月"],
        data: [
          [2.0, 4.9, 7.0, 23.2, 25.6, 76.7],
          [2.0, 4.9, 7.0, 23.2, 25.6, 76.7],
          [2.6, 5.9, 9.0, 26.4, 28.7, 70.7]
        ],
        nameArr: ["供水流量", "回水流量", "万平米平米流量"],
        high: 60,
        low: 7
      },
      // 基础饼图
      tsccPieData: [302, 217, 175],
      tsccPieRequiredSettings: {
        nameArr: ["盛发", "热电", "总厂"],
        radius: "70%"
      },
      tsccPieOptionalSettings: {
        title: "基础饼图",
        color: ["#17DA93", "#94CA1F", "rgba(0,255,255,1)"],
        center: ["50%", "60%"],
        top: "5%"
      },

      //环形饼图
      tsccDoughnutData: [302, 217, 175],
      tsccDoughnutRequiredSettings: {
        nameArr: ["盛发", "热电", "总厂"],
        radius: ["50%", "70%"]
      },
      tsccDoughnutOptionalSettings: {
        title: "环形饼图",
        color: ["#17DA93", "#94CA1F", "rgba(0,255,255,1)"],
        center: ["50%", "47%"],
        bottom: "5%"
      },

      headData7: {
        title: "柱状图+折线图"
      },
      tsccBarLineData: [
        [40, 50, 52],
        [100, 200, 300]
      ],
      tsccBarLineRequiredSettings: {
        xAxisData: ["2018年", "2019年", "2020年"]
      },
      tsccBarLineOptionalSettings: {
        // graphicColor: ["#00feff", "#027eff", "#0286ff", "yellow"],
        legendData: ["环比", "累计热量"],
        unit: ["(T/h)", "%"],
        barBorderRadius: [10, 10, 0, 0]
      },
      headData8: {
        title: "基础折线图",
        xAxisData: ["2018年", "2019年", "2020年"],
        nameArr: ["盛发", "热电", "总厂"],
        data: [
          [40, 50, 52],
          [100, 200, 300],
          [220, 182, 191, 234]
        ]
      },

      // 仪表盘
      tsccGaugeData: 87.5,
      tsccGaugeRequiredSettings: {
        name: "今年热源占比"
      },
      tsccGaugeOptionalSettings: {
        title: "仪表盘",
        color: [
          [0.2, "rgba(249,212,35,0.8)"],
          [0.8, "rgba(255,115,30,0.8)"],
          [1, "rgba(255,78,80,0.8)"]
        ]
      },

      headData11: {
        title: "雷达图",
        nameArr: ["折线图", "饼图", "雷达图", "仪表盘", "环形图"],
        data: [4300, 10000, 28000, 35000, 50000],
        option: {
          color: [
            "rgba(224,134,82, 0.1)",
            "rgba(224,134,82, 0.2)",
            "rgba(224,134,82, 0.4)",
            "rgba(224,134,82, 0.6)",
            "rgba(224,134,82, 0.8)",
            "rgba(224,134,82, 1)"
          ]
        }
      },
      //柱状图
      tsccBarData: [[120, 200, 150, 80, 70, 110, 130]],
      tsccBarRequiredSettings: {
        xAxisData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        barType: 1 //1为单柱  2为多柱
      },
      tsccBarOptionalSettings: {
        graphicColor: ["#00feff", "#027eff", "#0286ff", "yellow"],
        legendData: ["热源"],
        unit: ["(T/h)"],
        barBorderRadius: [10, 10, 0, 0]
      },
      // 折线图
      tsccLineData: [
        [40, 50, 52],
        [100, 200, 300],
        [220, 182, 191]
      ],
      tsccLineRequiredSettings: {
        xAxisData: ["2018年", "2019年", "2020年"],
        nameArr: ["盛发", "热电", "总厂"]
      },
      tsccLineOptionalSettings: {
        title: "折线",
        titleColor: "red",
        xAxisLineColor: "red",
        xAxisLabelColor: "#fff",
        yAxisLineColor: "yellow",
        // color: ["#3E1CDC", "#097CEB", "#21C76E"],
        unit: ["(pc)"],
        grid: {
          left: "2%",
          right: "7%",
          bottom: "20%",
          containLabel: true
        }
      },
      //柱状图s
      tsccBarSData: [
        [2.0, 4.9, 7.0, 23.2, 25.6, 76.7],
        [2.0, 4.9, 7.0, 23.2, 25.6, 76.7],
        [2.6, 5.9, 9.0, 26.4, 28.7, 70.7]
      ],
      tsccBarSRequiredSettings: {
        xAxisData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
        barType: 2 //1为单柱  2为多柱
      },
      tsccBarSOptionalSettings: {
        // title: "基础的柱状图",
        titleColor: "#fff",
        xAxisLineColor: "#fff",
        xAxisLabelColor: "red",
        legendData: ["供水流量", "回水流量", "万平米平米流量"],
        unit: ["(T/h)", "(T/wm²)"],
        yAxisIndexArr: [0,0,1],
        markLineArr: [{position: "middle",label: "区间高",value:'10'},{position: "end",label: "区间di",value:'20'}]
      }
    };
  },
  components: {
    itemBox,
    headNavtab,
    chartBar,
    basicsList,
    tableBox,
    pieChart,
    TsccLiquChart,
    barYs,
    TsccBarLineChart,
    basicBar,
    basicLine,
    basicGauge,
    basicRadar,
    TsccBarChart,
    TsccLineChart,
    TsccPieChart,
    TsccGaugeChart
  },
  methods: {
    navClick(key) {
      this.navIndex = key;
      //请求数据
      const arr = [
        { id: 1, name: "热源面积", value: "95665 W/m3" },
        { id: 1, name: "热源面积", value: "95665 W/m3" },
        { id: 1, name: "热源面积", value: "95665 W/m3" }
      ];
      this.headData.basicsData = arr;
    },
    initTable() {
      console.log("发送请求");
    },
    chartClick(key) {
      this.navIndex2 = key;
      console.log(11111);
    }
  }
};
</script>
<style lang="">
.continer {
  background: url(../../static/image/banner.png) no-repeat center;
  background-size: 100% 100%;
  height: 100%;
  /* padding-top: 5rem; */
  padding: 5rem 1rem;
}
.head-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 20rem;
}
.content-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 3rem;
  height: 20rem;
}
.item-box {
  height: 100%;
  flex: 1;
  margin-right: 1.5rem;
  position: relative;
}
.el-table,
.el-table__expanded-cell {
  background-color: transparent;
}
.table-box {
  margin-top: 2rem;
}
</style>
<style >
/* 表格字体颜色 */
.el-table {
  color: white;
  border: 0;
  background: rgba(18, 30, 110, 0.3);
}
/* 表格内背景颜色 */
.el-table th,
.el-table tr,
.el-table td {
  background-color: transparent;
  border: 0;
}
/* 双数行背景颜色 */
.el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: rgba(0, 8, 61, 0.8);
}

/* 使表格背景透明 */
.el-table th,
.el-table tr {
  background-color: transparent;
}
.el-table__body tr:hover > td {
  background: rgba(0, 8, 61, 0.5) !important ;
}
/* 表格表头字体颜色 */
.el-table thead {
  color: white;
  font-weight: 500;
  /* background-color: rgba(148, 144, 144, 0.3); */
  background: rgba(18, 30, 110, 0.5) !important ;
}
/* 删除表格下横线 */
.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: transparent;
}
</style>